// 导入核心配置函数
import { defineConfig } from "vite";
// 使用 SWC 版本的 React 插件（速度更快）
import react from "@vitejs/plugin-react-swc";
// Node.js 的 URL 工具库
import { fileURLToPath } from "node:url";
// Tailwind CSS 插件
import tailwindcss from '@tailwindcss/vite'
// px 转 vw 插件
import postcsspxtoviewport from 'postcss-px-to-viewport-8-with-include'

export default defineConfig({
  // 插件配置
  plugins: [react(),tailwindcss()], // 启用 React SWC 编译, 启用 Tailwind CSS

  // 模块解析配置
  resolve: {
    alias: {
      // 路径别名（关键配置）
      "@": fileURLToPath(new URL("./src", import.meta.url)), // 映射到 src 目录 
      "~": fileURLToPath(new URL("./public", import.meta.url)), // 映射到 public 目录
    },
  },


  // 转换前
  // import Button from '../../../components/Button'
  // 转换后
  // import Button from '@/components/Button'


  // CSS 相关配置
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 1920, // UI设计稿的宽度，一般写 320
          viewportHeight: 1080, // UI设计稿的宽度，一般写 320
          // 下面的不常用，上面的常用
          unitPrecision: 2, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          exclude: [/node_modules/], // 排除 node_modules 中的文件
          include: [/src/], // 只转换 src 目录下的文件
        }),
      ],
    },
    modules: {
      localsConvention: "camelCase", // 允许 JS 中通过驼峰格式访问 CSS 类名 允许 .btn-text → btnText
      generateScopedName: "[name]__[local]___[hash:base64:5]", // 自定义 CSS 模块类名格式 生成类似 .Button__root___H3jKd
    },
    preprocessorOptions: {
      scss: {
        api: "modern-compiler", // 启用新一代 Sass 编译器（sass-embedded）
        additionalData: `@use "@/styles/variables.scss";`, // 全局注入 SCSS 变量
        importer: [
          // 自定义导入处理器
          (url: string) => ({
            // 处理以 ~ 开头的路径（常用于 node_modules 引用）
            file: url.replace(/^~/, ""),
          }),
        ],
      },
    },
  },
});
